.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  font-family: var(--font-geist-sans);
}

.header {
  text-align: center;
  padding: 40px 20px;
  color: white;
}

.header h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.headerInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.headerInfo p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.connectionStatus {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.statusDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.connected {
  background: #28a745;
}

.disconnected {
  background: #dc3545;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* 实时统计 */
.statsSection {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.statsSection h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
}

.statsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.statCard {
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
  position: relative;
  overflow: hidden;
}

.statCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.statCard h3 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  opacity: 0.9;
}

.statValue {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.statLabel {
  font-size: 1rem;
  opacity: 0.8;
}

.progressBar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  margin-top: 1rem;
  overflow: hidden;
}

.progressFill {
  height: 100%;
  background: linear-gradient(90deg, #28a745, #20c997);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* 股票行情 */
.stockSection {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.stockSection h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
}

.stockTable {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.stockHeader {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  background: #f8f9fa;
  padding: 1rem;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #eee;
}

.stockRow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 1rem;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s ease;
}

.stockRow:hover {
  background: #f8f9fa;
}

.stockRow:last-child {
  border-bottom: none;
}

.stockSymbol {
  font-weight: bold;
  color: #333;
}

.stockPrice {
  color: #333;
}

.stockChange,
.stockChangePercent {
  font-weight: bold;
}

.positive {
  color: #28a745;
}

.negative {
  color: #dc3545;
}

/* 实时聊天 */
.chatSection {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.chatSection h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
}

.chatContainer {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.chatMessages {
  height: 300px;
  overflow-y: auto;
  padding: 1rem;
  background: #f8f9fa;
}

.message {
  margin-bottom: 1rem;
  padding: 1rem;
  border-radius: 8px;
  max-width: 80%;
}

.myMessage {
  background: #007bff;
  color: white;
  margin-left: auto;
}

.otherMessage {
  background: white;
  color: #333;
  border: 1px solid #eee;
}

.messageHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  opacity: 0.8;
}

.messageUser {
  font-weight: bold;
}

.messageTime {
  font-size: 0.8rem;
}

.messageContent {
  line-height: 1.4;
}

.chatInput {
  display: flex;
  padding: 1rem;
  background: white;
  border-top: 1px solid #eee;
}

.chatInput input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 1rem;
  font-size: 1rem;
}

.chatInput input:focus {
  outline: none;
  border-color: #007bff;
}

/* 渲染信息 */
.renderInfo {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.renderInfo h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 1rem;
}

.renderDetails {
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
}

.renderDetails p {
  margin: 0.5rem 0;
  color: #666;
}

/* Footer */
.footer {
  text-align: center;
  padding: 2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header h1 {
    font-size: 2rem;
  }

  .headerInfo {
    flex-direction: column;
    gap: 1rem;
  }

  .statsGrid {
    grid-template-columns: 1fr;
  }

  .stockHeader,
  .stockRow {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .stockHeader span,
  .stockRow span {
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
  }

  .stockRow span:last-child {
    border-bottom: none;
  }

  .message {
    max-width: 100%;
  }

  .chatInput {
    flex-direction: column;
    gap: 1rem;
  }

  .chatInput input {
    margin-right: 0;
  }

  .main {
    padding: 0 15px 40px;
  }
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  .statsSection,
  .stockSection,
  .chatSection,
  .renderInfo {
    background: #333;
    color: white;
  }

  .statsSection h2,
  .stockSection h2,
  .chatSection h2,
  .renderInfo h3 {
    color: white;
  }

  .stockHeader {
    background: #444;
    color: white;
    border-bottom-color: #555;
  }

  .stockRow {
    border-bottom-color: #555;
  }

  .stockRow:hover {
    background: #444;
  }

  .stockSymbol,
  .stockPrice {
    color: white;
  }

  .chatMessages {
    background: #444;
  }

  .otherMessage {
    background: #555;
    color: white;
    border-color: #666;
  }

  .chatInput {
    background: #333;
    border-top-color: #555;
  }

  .chatInput input {
    background: #444;
    border-color: #666;
    color: white;
  }

  .renderDetails {
    background: #444;
  }

  .renderDetails p {
    color: #ccc;
  }
}
